<template>
  <div>
    <div
      v-if="
        routeNow !== '/' && routeNow !== '/login' && routeNow !== '/register'
      "
      class="root"
    >
      <Nav></Nav>
      <div class="flex-row">
        <div class="flex-column2" :style="`height:${height - 50}px`">
          <Menu></Menu>
        </div>
        <div class="flex-column" :style="`height:${height - 50}px`">
          <Breadcrumb class="bread-crumb">
            <BreadcrumbItem to="/">
              <Icon type="ios-home-outline"></Icon> Home
            </BreadcrumbItem>
            <BreadcrumbItem to="/components/breadcrumb">
              Components
            </BreadcrumbItem>
            <BreadcrumbItem> Breadcrumb </BreadcrumbItem>
          </Breadcrumb>
          <router-view></router-view>
        </div>
      </div>
    </div>
    <router-view v-else></router-view>
  </div>
</template>
<script>
import Nav from "./components/Nav.vue";
import Menu from "./components/Menu.vue";
import Label from "./components/Label.vue";
import QRCode from 'qrcodejs2'
export default {
  mounted() {
    this.height = document.documentElement.clientHeight;
    // window.onresize = () => {
    //   return (() => {
    //     this.height = document.documentElement.clientHeight;
    //   })();
    // };
    window.addEventListener("resize", () => {
      this.height = document.documentElement.clientHeight;
    });
  },
  data() {
    return {
      routeNow: window.location.pathname,
      route: this.$route,
      height: document.documentElement.clientHeight,
    };
  },
  components: {
    Nav,
    Menu,
    Label,
  },
  beforeDestroy() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.root {
  width: 100vw;
  height: 100vh;
  background: #f7f8fc;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  height: auto;
  //background: red;
}
.flex-column {
  //height: ;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: auto;
  padding: 12px;
  padding-bottom: 0px;
  overflow: scroll;
}
.flex-column2 {
  display: flex;
  flex-direction: column;
  //flex: 1;
  width: 180px;
  overflow: scroll;
}
</style>